.category_header {
  width: 100%;
  background-color: #fff;
  margin-top: px2rem(64px);
  .header-top {
    display: flex;
    position: fixed;
    border-bottom: 1px solid #e4e4e4;
    align-items: center;
    justify-content: center;
    height: px2rem(40px);
    width:100%;
    z-index: 4;
    background-color: #fff;
    .item {
      font-size: px2rem(14px);
      flex:1;
      text-align: center;
      position: relative;
      &.type:after, &.cate:after {
        content: '';
        display:inline-block;
        margin-bottom: px2rem(2px);
        margin-left: px2rem(6px);
        width: px2rem(5px);
        height: px2rem(5px);
        border: 1px solid #666;
        border-width: 0 1px 1px 0;
        transform: rotate(45deg);
        transition: .3s;
        -webkit-transition: .3s;
      }
      &.filter:after {
        content: '';
        display:inline-block;
        width: px2rem(12px);
        height: px2rem(12px);
        background-image: url('./img/filter.png');
        background-size: cover;
      }
      &:before {
       content: '';
       display:none;
       width: px2rem(7px);
       height: px2rem(7px);
       border: 1px solid #e4e4e4;
       border-width: 0 1px 1px 0;
       transform: rotate(225deg);
       position: absolute;
       left:49%;
       top:px2rem(23px);
       background-color: #fff;
      }
      &.current::before {
        display: inline-block;
      }
      &.current.cate::before {
         background-color: #efefef;
      }
      &.current:not(.filter)::after{
         transform: rotate(225deg);
         -webkit-transform: rotate(225deg);
      }
    }
    .type {
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }
  }
  .panel {
    transition: .3s;
    -webkit-transition: .3s;
    position: fixed;
    z-index: 5;
    left: 0;
    top: px2rem(105px);
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    &.show {
      display: block;
      transition: .3s;
      -webkit-transition: .3s;
    }
    .panel-inner {
      height: px2rem(300px);
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      background-color: #fff;
      .cate-panel {
        display: none;
        .cate-item {
          .item-title {
            position: relative;
            font-size: px2rem(12px);
            height: px2rem(30px);
            line-height: 30px;
            box-sizing: border-box;
            padding-left: px2rem(13px);
            background-color: #efefef;
            color: #666;
             &::before {
               content: '';
               position: absolute;
               display: block;
               margin-top: px2rem(8px);
               margin-left: px2rem(-13px);
               width: px2rem(2px);
               height: px2rem(16px);
               background-color: #ffd161;
             }
          }
          .item-content {
            min-height: px2rem(20px);
            .cate-box {
              font-size: px2rem(12px);
              width: 33.33%;
              padding:px2rem(10px);
              box-sizing: border-box;
              float: left;
              .cate-box-inner {
                border: 1px solid #c4c4c4;
                text-align: center;
                color: #666;
                height: px2rem(40px);
                line-height: px2rem(40px);
                position: relative;
                &.active {
                  background-color: #fffbf1;
                  color: #ffb000;
                  border-color: #ffb000;
                }
              }
            }
          }
        }
        &.current{
          display: block;
        }
      }
      .type-panel {
         display: none;
        .type-box {
          height: px2rem(46px);
          line-height: px2rem(46px);
          font-size: px2rem(14px);
          padding-left: px2rem(15px);
          border-bottom: 1px solid #e9e9e9;
          color: #666;
          &.active {
            color: #ffb000;
          }
        }
        &.current{
          display: block;
        }
      }
      .filter-panel {
        display: none;
        .filter-item-content {
           margin-bottom: px2rem(10px);
           margin-top: px2rem(5px);
           padding-left: px2rem(5px);
           padding-right: px2rem(5px);
          .filter-name {
             font-size: px2rem(12px);
             padding-left: px2rem(13px);
             color: #666;
          }
          .filter-box {
            font-size: px2rem(12px);
            width: 33.33%;
            padding:px2rem(10px);
            box-sizing: border-box;
            float: left;
            .has-icon {
               img {
                  display: block;
                  width: px2rem(18px);
                  height: px2rem(18px);
                  position: absolute;
                  top: px2rem(10px);
                  left: px2rem(4px);
               }
            }
            .filter-box-inner {
              border: 1px solid #c4c4c4;
              text-align: center;
              color: #666;
              height: px2rem(40px);
              line-height: px2rem(40px);
              position: relative;
              &.active {
                background-color: #fffbf1;
                color: #ffb000;
                border-color: #ffb000;
              }
            }
          }
        }
        &.current {
          display: block;
        }
      }
     
    }
  }
}